<template>
  <el-dialog
    :visible="dialogVisible"
    :close-on-click-modal="false"
    :title="dialogTitle"
    width="60%"
    top="5%"
    :fullscreen="lookFile || lookHistory ? true : false"
    :before-close="cancelClose"
    v-loading="lookFile ? loadingFile : false"
    element-loading-text="拼命加载中"
  >
    <el-carousel
      v-loading="loadingFile"
      element-loading-text="拼命加载中"
      v-if="lookHistory"
      style="width: 100%; height: calc(100vh - 120px)"
    >
      <el-carousel-item v-for="(item, index) in historyList" :key="index">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
    <iframe
      :src="fileUrl"
      frameborder="0"
      v-if="lookFile"
      style="width: 100%; height: calc(100vh - 120px)"
    ></iframe>
    <Table
      v-if="!lookFile && !lookHistory"
      :tableData="fileTable"
      height="50vh"
      :loading="loadingFile"
      :tabtitle="tabtitle"
      :showPagination="false"
    >
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="previewFile(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </Table>
  </el-dialog>
</template>

<script>
import Table from '@/components/Table.vue'
import { findFileByMeetingId } from '@/apis/meetingMinutes.js'
import { seeMeetingFile, seeHistoryMeeting } from '@/apis/meetingList.js'
export default {
  components: {
    Table
  },

  data() {
    return {
      fileTable: [],
      dialogVisible: false,
      fileUrl: '',
      lookFile: false,
      lookHistory: false,
      dialogTitle: '会议纪要',
      tabtitle: [{ prop: 'fileName', label: '文件名称' }],
      loadingFile: false,
      historyList: []
    }
  },
  mounted() {},
  methods: {
    async getHistoryFile(id) {
      this.loadingFile = true
      let res = await seeHistoryMeeting({ id })
      if (res.code === 200 && res.data?.length > 0) {
        this.historyList = res.data
      }
      this.loadingFile = false
    },
    async getFilelList(meetingId) {
      this.loadingFile = true
      let res = await findFileByMeetingId({ meetingId })
      if (res.code === 200 && res.data) {
        this.fileTable = res.data
      }
      this.loadingFile = false
    },

    async previewFile(row) {
      this.lookFile = true
      this.lookHistory = false
      this.loadingFile = true
      const { fileName, fileUrl } = row
      this.dialogTitle = fileName
      let res = await seeMeetingFile({ fileUrl, fileName })
      if (res.code === 200 && res.data) {
        this.fileUrl =
          process.env.NODE_ENV === 'production'
            ? `${
                window.webConfig.webApiBaseUrl
              }/kkfile/onlinePreview?url=${encodeURIComponent(res.data)}`
            : `${
                process.env.VUE_APP_BASE_URL
              }/kkfile/onlinePreview?url=${encodeURIComponent(res.data)}`
        // this.fileUrl = `http://192.168.8.148/kkfile/onlinePreview?url=${encodeURIComponent(
        //   res.data
        // )}`
      }
      this.loadingFile = false
    },

    cancelClose() {
      if (this.lookFile) {
        this.lookFile = false
        this.lookHistory = false
        this.dialogTitle = '会议纪要'
      } else {
        this.dialogVisible = false
      }
    },
    // 成功失败日志
    logSuccessOrError(data, type) {
      // this.addLog(1, this.elDialogTitle == '编辑' ? 'edit' : 'add', data, type)
    },

    show(row, flag) {
      console.log(row)
      this.dialogVisible = true
      if (flag) {
        this.lookFile = false
        this.lookHistory = false
        this.dialogTitle = '会议纪要'
        this.getFilelList(row.id)
      } else {
        this.lookHistory = true
        this.lookFile = false
        this.dialogTitle = '会议存档'
        this.getHistoryFile(row.id)
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .el-carousel__container {
    height: calc(-120px + 100vh) !important;
    img {
      width: inherit;
      height: inherit;
    }
  }
}
</style>
